import React from 'react';
import { Tools, Icon, SwipeAction, Checkbox } from 'weaver-mobile';
import { withRouter } from 'react-router-dom';
import ListIcon from '../listicon'
import Wrttag from '../wrttag'

const CheckboxItem = Checkbox.CheckboxItem
const getLabel = Tools.getLabel

@withRouter
class LevelList extends React.Component {

  constructor(props) {
    super(props)
    this.state = { ...props }
  }

  componentWillMount() {

  }

  componentWillReceiveProps(newProps) {
    this.setState({ ...newProps })
  }

  onItemClick = (dataid) => {
    const { onItemClick } = this.state

    if (typeof onItemClick === "function") {
      onItemClick(dataid)
    }
  }

  onOpenFoldClick = (event, currdata) => {
    event.preventDefault()
    event.stopPropagation()
    const { onOpenFoldIconClick, getChildren, data } = this.state

    currdata.childrenOpen = !currdata.childrenOpen

    if (typeof getChildren === "function") {
      if (currdata.childrenOpen) {
        getChildren(currdata)
      } else {
        currdata.children = []
      }
    }

    if (typeof onOpenFoldIconClick === "function") {
      onOpenFoldIconClick(currdata)
    }

    this.setState({
      data
    })
  }

  getItem = (d, i, deep) => {
    let { comsbtn = [], showseq = true, showCheckbox = false, onCheckedChange, getChildren, itemBottomOffset = 45, bottomBorderColor = "#ccc", bgColor = "#F8F8F8" } = this.state
    if (comsbtn.length === 0) {
      comsbtn = d.comsbtn || []
    }

    return (
      <SwipeAction
        key={d.id}
        autoClose
        right={comsbtn}
      >
        <div style={{ background: bgColor, paddingLeft: 20 }} className="bg-wrapper">
          <div style={{ borderBottom: deep === 0 ? "1px solid" + bottomBorderColor : "1px solid #ddd" }} className="data-item-wrapper" onClick={() => { this.onItemClick(d.id) }}>
            {
              getChildren &&
              <div className="arrow-wrapper" style={{ width: 25 + 20 * deep, paddingLeft: 20 * deep }} onClick={(event) => { this.onOpenFoldClick(event, d) }}>
                <span className="openfold">
                  {d.hasChildren ?
                    <span>
                      <Icon type={d.childrenOpen ? "down" : "right"} color="#999" size="xs" />
                    </span>
                    : ""
                  }
                </span>
              </div>
            }
            <div className="content-wrapper">
              <div className="top-info-wrapper">
                {
                  showCheckbox &&
                  <span onClick={(e) => e.stopPropagation()}>
                    <CheckboxItem 
                      key={d.id} 
                      className="checkbox" 
                      checked={d.checked} 
                      onChange={(e) => { 
                        typeof onCheckedChange === "function" && onCheckedChange(d.id, e.target.checked)
                      }} 
                    />
                  </span>
                }
                {showseq ? <span className="seq">{i + 1}</span> : ""}
                <span className="icon"><ListIcon type={d.status}></ListIcon></span>
                <span className="title-wrapper">
                  <span className="title" style={d.firstview ? { color: "red" } : {}}>
                    {d.title}
                  </span>
                </span>
              </div>

              {
                d.tags &&
                <div className="tags-wrapper">
                  {
                    d.tags.map((tag, ti) => {
                      return (
                        <span className="tag-wrapper">
                          <Wrttag
                            bgcolor={tag.color}
                            lable={tag.name}
                          />
                        </span>
                      )
                    })
                  }
                </div>
              }

              {
                (d.user || d.date || d.commentCount > 0) &&
                <div className="bottom-info-wrapper" style={{ paddingLeft: itemBottomOffset + "px" }}>
                  <span className="user-date-wrapper">
                    {d.user ? <span className="user">{d.user}</span> : ""}
                    {d.date ? <span className="date">{d.date}</span> : ""}
                  </span>
                  {d.commentCount > 0 ?
                    <span className="comment-wrapper">
                      <span className="icon">
                        <Icon type="blog-comment" size="xxs" />
                      </span>
                      <span className="count">
                        {d.commentCount}
                      </span>
                    </span> : ""
                  }
                </div>
              }
            </div>
          </div>
        </div>
      </SwipeAction>
    )
  }

  getChildrenCom = (_d, i, deep, r) => {
    r.push(this.getItem(_d, i, deep))
    if (_d.children && _d.children.length > 0) {
      for (let k = 0; k < _d.children.length; k++) {
        this.getChildrenCom(_d.children[k], k, deep + 1, r)
      }
    }

    return r
  }

  onGetMoreClick = () => {
    const { getMore } = this.state
    if (typeof getMore === "function") {
      getMore()
    }
  }

  render() {
    const { data = [], hasMore = "1", getMore, showGetMore } = this.state

    return (
      <div className="workrelate-mobile-levellist">
        <div className="data-list">
          {
            data.map((d, i) => {
              return this.getChildrenCom(d, i, 0, [])
            })
          }
        </div>
        {
          hasMore == "2" ? (
            <div className="loadmore" onClick={this.onGetMoreClick}>
              <span>{getLabel(82720, '加载更多')}</span>
              <span>
                <Icon type="down" size="xxs" />
              </span>
            </div>
          ) : ""
        }
      </div>
    )
  }
}

export default LevelList